<template>
    <section class="simple-title">
        <header class="header-inner clearfix">
            <span class="title" v-if="type !== 5">{{title}}</span><span style="font-size: 16px" v-if="type === 10">(共{{num}}人)</span>
            <span class="title" v-if="type === 5" style="color: black">{{title}}</span>
            <span class="more" v-if="show" @click="fun()">{{more ?  more : '更多'}} >></span>
        </header>
    </section>
</template>

<script>
export default {
  name: 'SimpleTitle',
    props: {
      title: {
          type: String,
          required: true
      },
        num:{
            type: Number
        },
        more: {
          type: String
      },
        type: {
            type: Number
        },
      show: {
          type: Boolean,
          default: true
      }
    },
  data () {
      return {}
  },
    methods:{
        fun () {
            this.$router.push({path:'/my/myindex/level'})
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
    .simple-title {
        .header-inner {
            height: 47px;
            line-height: 47px;
            border-bottom: 1px solid @theme-color-dark;
            color: @theme-color-dark;
            .more {
                float: right;
                font-size: 14px;
                cursor: pointer;
            }
            .title {
                float: left;
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
</style>
